<template>
	<view>
		<view class='tails_box' :style='"height:" + CenterCoupon.AllowOfflineWriteOff?"640rpx":"400rpx"'>
			<view class='tails_couname'>
				<text>{{CenterCoupon.activity_name}}</text>
			</view>
			<view class='tails_mon'><label style='font-size:30rpx;margin-right:8rpx;margin-left:25%'>{{__('￥')}}</label><label style='font-size:60rpx;margin-right: 24rpx;ont-weight:bold;'>{{CenterCoupon.voucher_price}}</label><label style='font-size:24rpx;color:#9B9B9B'>{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule_json.requirement.buy.subtotal )}}</label></view>
			<view class='tails_time' style='width:100%'>{{sprintf(__('有效日期至：%s'), CenterCoupon.voucher_end_date || CenterCoupon.activity_endtime)}}
			</view>
			<view class='tails_time' v-if="CenterCoupon.AllowOfflineWriteOff">
				<image :src='CenterCoupon.WriteOffCodeUrl' style="width: 64%;height: 289rpx;"></image>
			</view>
			<view class='tails_time' style='font-size:24rpx;color:#9B9B9B ' v-if="CenterCoupon.AllowOfflineWriteOff">
				{{CenterCoupon.WriteOffCode}}
			</view>
			<view class='btn_box' v-if="!CenterCoupon.AllowOfflineWriteOff" style="height: 100rpx;">
				<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenowWeixin" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL  && CenterCoupon.CouponType==2" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenow" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" v-if="(CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_FINISHED || CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_CLOSED) && CenterCoupon.voucher_state_id != StateCode.VOUCHER_STATE_USED" :data-id="CenterCoupon.activity_id">{{__('已领完')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_USED">{{__('已使用')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_TIMEOUT">{{__('已过期')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff == false" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('立即使用')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('在线使用')}}
				</view>


				<view :data-id="CenterCoupon.activity_id" :data-name="CenterCoupon.Name" @tap="shareBox" class='but-stl02' v-if="false">{{__('分享给好友')}}
				</view>
			</view>
		</view>
		<view class='img_box'>
			<image src="https://static.shopsuite.cn/xcxfile/appicon/coupon/partingLine.png" style="width:100%;height:100%;vertical-align:top;"></image>
		</view>
		<view class='tailfoli' style="overflow: hidden;">
			<view class='btn_box' style='margin:9px auto 0 auto;overflow: hidden' v-if="CenterCoupon.AllowOfflineWriteOff">
				<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenowWeixin" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL  && CenterCoupon.CouponType==2" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" @tap="receivenow" v-if="CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_NORMAL" :data-id="CenterCoupon.activity_id">{{__('立即领取')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" v-if="(CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_FINISHED || CenterCoupon.activity_state == StateCode.ACTIVITY_STATE_CLOSED) && CenterCoupon.voucher_state_id != StateCode.VOUCHER_STATE_USED" :data-id="CenterCoupon.activity_id">{{__('已领完')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_USED">{{__('已使用')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" :data-id="CenterCoupon.activity_id" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_TIMEOUT">{{__('已过期')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff == false" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('立即使用')}}
				</view>
				<view class='but-stl' style="margin-right: 86rpx;" v-if="CenterCoupon.voucher_state_id == StateCode.VOUCHER_STATE_UNUSED && CenterCoupon.AllowOfflineWriteOff " :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('在线使用')}}
				</view>
				<view class='but-stl02' :data-id="CenterCoupon.activity_id" @tap="shareBox" :data-name="CenterCoupon.Name" v-if="false">{{__('分享给好友')}}
				</view>
				<view class='btn_mx' v-if="CenterCoupon.AllowOfflineWriteOff">{{__('支持线下使用（在门店购物时，向店员出示此码抵扣）')}}</view>
			</view>
			<view class='tails_tox' v-if="!CenterCoupon.AllowOfflineWriteOff">
				<view class='tail_fo1'>{{__('使用条件')}}</view>
				<view class='tail_fo2'>
					<view style="margin-bottom: 10rpx; ">1、{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule_json.requirement.buy.subtotal)}}</view>
					<view><label style="margin-right: 57rpx;">2、{{CenterCoupon.store_name}}{{__('可用')}}</label><label style="color: #FFCA81;" :data-id="CenterCoupon.activity_id" @tap="usenow" :data-store_id="(CenterCoupon.store_id)">{{__('查看')}}</label></view>
				</view>
			</view>
		</view>
		<view class='tails_tox' v-if="CenterCoupon.AllowOfflineWriteOff">
			<view class='tail_fo5'>{{__('使用条件')}}</view>
			<view class='tail_fo6'>
				<view style="margin-bottom: 10rpx; ">1、{{sprintf(__('满￥%s可用'), CenterCoupon.voucher_subtotal || CenterCoupon.activity_rule_json.requirement.buy.subtotal)}}</view>
				<view><label style="margin-right: 57rpx;">2、{{CenterCoupon.store_name}}{{__('可用')}}</label><label style="color: #FFCA81;" :data-id="CenterCoupon.activity_id" :data-store_id="(CenterCoupon.store_id)" @tap="usenow">{{__('查看')}}</label>
				</view>
			</view>
		</view>
		<view style='width:100%' v-if="CenterCoupon.Description != ''&& CenterCoupon.Description != null  || CenterCoupon.AllowOfflineWriteOff">
			<view class='tails_tox' style="width: 85%;padding-bottom: 60rpx;">
				<view class='tail_fo1' style='color:#fff '>{{__('使用说明')}}</view>
				<view class='tail_fo3' style='color:#fff;height:43rpx' v-if="CenterCoupon.AllowOfflineWriteOff">
					{{__('支持线下使用，领取后向店员展示优惠券详情')}}
				</view>
				<rich-text style='color:#fff;white-space: pre-line;font-size:22rpx;word-break:break-all' v-if='CenterCoupon.Description' nodes='CenterCoupon.Description'></rich-text>
			</view>
		</view>
		<template is="shareMskTpl" data="PageQRCodeInfo" />

	</view>
</template>

<script>
	import $ from "../../helpers/util";
	import {
		mapState,
		mapMutations
	} from 'vuex'


	export default {
		data() {
			return {
				options: {},
				CenterCoupon: {
					activity_rule_json: {
						requirement: {
							buy: {}
						}
					}
				},
				cid: "",
				couponItemId: ""
			};
		},
		computed: mapState(['Config', 'StateCode', 'notice', 'plantformInfo', 'shopInfo', 'userInfo', 'hasLogin']),
		onLoad: function(options) {
			uni.setNavigationBarTitle({
				title: this.__('优惠券详情')
			});

			this.setData({
				cid: options.cid,
				couponItemId: options.couponItemId
			});

			var that = this;
			that.GetCouponInfo()

			/*
        	this.forceUserInfo(function(user) {
				if (user) {
					that.GetCouponInfo()
				}
			});
			*/
		},
		methods: {
			...mapMutations(['login', 'logout', 'getPlantformInfo', 'forceUserInfo', 'getUserInfo']),

			GetCouponInfo: function(e) {
				var params = {
						activity_id: this.cid,
						user_voucher_id: this.couponItemId
					},
					that = this;


				that.$.request({
					url: this.Config.URL.user.voucher_get,
					data: params,
					success: function(data, status, msg, code) {
						if (status == 200) {
							data.voucher_end_date = that.$.formatDateFormatter(data.voucher_end_date, 'yyyy-MM-dd')
							data.AllowOfflineWriteOff = false;
							that.setData({
								CenterCoupon: data
							});
						}
					}
				});
			},
			onGotUserInfo: function(e) {
				if (null != e.detail.userInfo) {
					var a = {
						Photo: e.detail.userInfo.avatarUrl,
						NickName: e.detail.userInfo.nickName,
						UserName: app.globalData.UserInfo.UserName
					};
					$.xsr($.makeUrl(userapi.UpdateUserPhotoAndNickName, a), function(e) {
						//console.log("个人信息：", e)
					}), app.imageUrl = e.detail.userInfo.avatarUrl, app.nickName = e.detail.userInfo.nickName, app.authorize = true, this.shareQRCode()
				}
			},
			shareQRCode: function(e) {
				//console.log("2：", this.cid);
				var a = this,
					o = {
						vendorId: app.globalData.VendorInfo.Id,
						userId: app.globalData.UserInfo.Id,
						couponId: this.cid
					};
				$.xsr($.makeUrl(userapi.QRCouponCodePoster, o), function(e) {
					//console.log("图片", e), a.setData({PageQRCodeInfo: {Path: e.Info, IsShare: true, IsShareBox: false, IsJT: true}})
				})
			},
			showCodeImg: function() {
				wx.previewImage({
					current: this.PageQRCodeInfo.Path,
					urls: [this.PageQRCodeInfo.Path]
				})
			},
			saveImg: function() {
				var a = this;
				$.loading(), wx.downloadFile({
					url: this.PageQRCodeInfo.Path,
					success: function(e) {
						$.hideloading(), wx.saveImageToPhotosAlbum({
							filePath: e.tempFilePath,
							success: function() {
								a.setData({
									PageQRCodeInfo: {
										Path: "",
										IsShare: false,
										IsShareBox: false,
										IsJT: false
									}
								}), $.alert("保存图片成功！")
							},
							fail: function(e) {
								$.hideloading()
							}
						})
					},
					fail: function(e) {
						$.hideloading()
					}
				})
			},
			cancelShare: function() {
				this.setData({
					PageQRCodeInfo: {
						Path: "",
						IsShare: false,
						IsShareBox: false,
						IsJT: false
					}
				})
			},
			usenow: function(e) {
				let that = this;
				var t = e.currentTarget.dataset.store_id;
				if (that.CenterCoupon.item_ids.length > 0) {
					var item_ids = JSON.stringify(that.CenterCoupon.item_ids)
					that.$.gotopage({
						url: "/member/product/coupon?store_id=" + t + '&item_ids=' + item_ids
					})
				} else {
					that.$.redirectTo({
						url: "/member/product/coupon?store_id=" + t
					})
				}

			},

			receivenow: function(e) {
				let that = this;
				that.getCoupon(e.currentTarget.dataset.id)
			},
			getCoupon: function(t) {
				let that = this;
				var params = {
					activity_id: t,
					user_is_new: 0
				};

				this.forceUserInfo((user) => {
					if (user) {
						$.request({
							url: this.Config.URL.user.voucher_add,
							data: params,
							success: function(data, status, msg, code) {
								if (200 == status) {
									that.getCouponlist();

									that.$.confirm(that.__("领取成功!,去消费"), function(a) {
										if (a.confirm) {
											that.$.navigateTo({
												url: "/pagesub/index/store?store_id=" + that.CenterCoupon.store_id
											})
										}

									});
								} else {
									$.alert(msg);
								}
							},
						});
					}
				});


				/*
				t && $.clearxsr($.makeUrl(userapi.UserReceiveCoupon, params), function (t) {
					0 == t.Code ? (that.setData({isCancelSuccess: false, mskType: 2, Coupons: t.Info}), wx.showToast({
						title: "领取成功！",
						icon: "none"
					})) : wx.showToast({title: t.Msg, icon: "none"})
				})

				*/
			},
			shareBox: function() {
				this.setData({
					PageQRCodeInfo: {
						Path: "",
						IsShare: true,
						IsShareBox: true,
						IsJT: false
					}
				})
			}
		}
	}
</script>



<style lang="scss">
	@import "../../styles/_variables";

	/* pages/Receivetails/Receivetails.wxss */
	page {
		background: #DB384C
	}

	.tails_box {
		width: 94%;
		/*height: 345rpx;*/
		background: #fff;
		margin: 70rpx auto 0 auto;
		position: relative;
		padding-top: 18rpx;
		border-top-left-radius: 11px;
		border-top-right-radius: 11px;
	}

	.tails_logo {
		width: 112rpx;
		position: absolute;
		top: -14%;
		left: 42%;
		border-radius: 50%;
		overflow: hidden
	}

	.tails_shopname {
		width: 100%;
		color: #fff;
		font-size: 24rpx;
		text-align: center
	}

	.tails_couname {
		width: 100%;
		color: #DB384C;
		font-size: 36rpx;
		text-align: center;
		margin-top: 10rpx;
		font-weight: bold;
	}

	.tails_mon {
		width: 100%;
		color: #DB384C;
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	.tails_but {
		width: 54%;
		margin: 43rpx auto 0 auto;
		height: 50rpx;
		background: #fff;
		border-radius: 54rpx;
		text-align: center;
		font-size: 24rpx;
		line-height: 50rpx;
		color: #DB384C
	}

	.tails_time {
		width: 64%;
		/*margin: 25rpx auto 0 auto;*/
		text-align: center;
		font-size: 22rpx;
		color: #DB384C
	}

	.tails_tox {
		width: 89%;
		margin: 0 auto;
	}

	.tail_fo1 {
		font-size: 24rpx;
		color: #000000;
		line-height: 62rpx
	}

	.tail_fo5 {
		font-size: 24rpx;
		color: #fff;
		padding-left: 20rpx;
		line-height: 62rpx
	}

	.tail_fo2 {
		width: 100%;
		font-size: 24rpx;
		color: #9B9B9B;
		border-radius: 10rpx
	}

	.tail_fo6 {
		width: 100%;
		font-size: 24rpx;
		color: #fff;
		padding-left: 20rpx;
		border-radius: 10rpx
	}

	.tail_fo3 {
		width: 100%;
		height: 137rpx;
		font-size: 22rpx;
		border-radius: 10rpx
	}

	.but-stl {
		width: 42%;
		float: left;
		text-align: center;
		height: 61rpx;
		border-radius: 50rpx;
		border: 1px solid #fff;
		background: #DB384C;
		font-size: 26rpx;
		color: #fff;
		line-height: 61rpx;
	}

	.but-stl02 {
		width: 42%;
		float: left;
		text-align: center;
		height: 61rpx;
		border-radius: 50rpx;
		border: 1px solid #DB384C;
		background: #fff;
		font-size: 26rpx;
		color: #DB384C;
		line-height: 61rpx;
	}

	.tailfoli {
		width: 94%;
		height: 88px;
		background: #fff;
		border-bottom-left-radius: 11px;
		border-bottom-right-radius: 11px;
		margin: 0 auto;
	}

	.btn_box {
		width: 88%;
		margin: 22px auto 0 auto;
		wxcs_style_margin: 22px auto 0 auto;
		/*height: 100rpx;*/
		display: flex;
	}

	.img_box {
		width: 94%;
		height: 72rpx;
		margin: 0 auto
	}

	.btn_mx {
		text-align: center;
		font-size: 22rpx;
		color: #9B9B9B;
		margin: 88rpx 0 0
	}
</style>